</div>
<div id="principal">
   <div id="cuerpo">
    <section id="parrafo">
      
        <script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $("#accordion h3:first").addClass("active");
  $("#accordion div:not(:first)").hide();
  $("#accordion h3").click(function(){
    $(this).next("div").slideToggle("slow")
    .siblings("div:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
  });

/* IDEM PERO EL PRIMERO DESPLEGADO
  $("#acordeon h2:first").addClass("active");
  $("#acordeon div:not(:first)").hide();
  $("#acordeon h2").click(function(){
    $(this).next("div").slideToggle("slow")
    .siblings("div:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h2").removeClass("active");
  });
*/

});
//]]>
</script>

<style>
  #accordion { /* el rectángulo contenedor */
    margin-left: 153px;
    width: 553px;
  }
  #accordion h3 { /* los enlaces que despliegan y contraen el contenido */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 10px #444 inset;
    -webkit-box-shadow: 0 0 10px #444 inset;
    box-shadow: 0 0 10px #444 inset;
    background-color: #DCDFF4;
    color: #6D76AF;
    cursor: pointer;
    font-family: Tahoma;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.7em;
    margin: 0 0 2px;
    position: relative;
  }
  #accordion h3:hover { /* efecto hover sobre esos enlaces */
    -moz-box-shadow: 0 0 10px #000 inset;
    -webkit-box-shadow: 0 0 10px #000 inset;
    box-shadow: 0 0 10px #000 inset;
    background-color: #CE1E3A;;
    color: #FFF;
  }
  #accordion h3 span { /* una imagen que permuta segñun el estado del contenido */
    background: transparent url(http://img810.imageshack.us/img810/6159/demoacordeonjs.gif) no-repeat right top;
    display: block;
    height: 16px;
    position: absolute;
    right: 20px;
    top: 7px;
    width: 16px;
  }
  #accordion h3.active span { /* desplegado */
    background-position: right bottom;
  }
  #accordion div { /* el contenido */
background-color: #A8A8A8;
border: 1px dotted rgba(255, 255, 255, 0);
color: #000;
font-family: Georgia;
font-size: 13px;
line-height: 1.5;
margin: 10px;
padding: 10px;
  }
</style>
<div id="tituloo"> Puntos de Interes</div>
<div id="accordion">
      <?php 
   
      foreach($pdi as $pd) {
              if($pd->id_sede==$sede){ ?>
          <h3> <img class="imagen" src="<?php echo base_url().$pd->imagen; ?>"style="width: 87px;height: 63px;"> </img> <?php echo $pd->nombre; ?><span></span></h3>
                <div>  
                Localizacion:  <?php echo $pd->calle; ?> <?php echo $pd->numero; ?>, <?php echo $pd->ciudad; ?>, <?php echo $pd->provincia; ?>, <?php echo $pd->pais; ?>.
                 </br>
                 <?php echo $pd->descripcion; ?>
                  </div> 
                                      
                     
         
       <?php }
               } ?>
</div>

</div>
</div>
</body>
</html> 